<template>
    <div class="container">
        <div class='u-title f-mtp10'>
            <h2>{{isEdit ? '编辑成员' : '添加成员'}}</h2>
        </div>

        <div class='u-content mn flex flex-column flex-center'>
            <div class='item'>
                <label class='tip' for="">成员账号：</label>
                <div class='item-right'>
                    <el-input v-model="username" placeholder="成员账号"></el-input>
                </div>
            </div>
            <div class='item'>
                <label class='tip' for="">成员姓名：</label>
                <div class='item-right'>
                    <el-input v-model="name" placeholder="姓名"></el-input>
                </div>
            </div>
            <div class='item'>
                <label for="">所属部门：</label>
                <div class='item-right'>
                    <SelectDepartment ref='dep' class='f-w-full' @getDepartment='getDepartment' placeholder="选择部门"/>
                    <p class='upload-tip'>选择所属部门后默认继承部门权限</p>
                </div>
            </div>
            <div class='item'>
              <el-checkbox v-model="isResetPassword">重置密码</el-checkbox>
            </div>
            <div v-if='isResetPassword' class='item'>
                <label class='tip' for="">登录密码：</label>
                <div class='item-right'>
                    <el-input type="password" maxlength="16" v-model="password" placeholder="请输入6~16位登录密码"></el-input>
                </div>
            </div>
            <div v-if='isResetPassword' class='item'>
                <label class='tip' for="">确认密码：</label>
                <div class='item-right'>
                    <el-input type="password" maxlength="16" v-model="rePassword" placeholder="确认密码"></el-input>
                </div>
            </div>
            <div class='btn-box f-ptp20'>
                <el-button
                    class='f-w300 s-bg-green s-cfff'
                    @click="submit">提交</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import SelectDepartment from '../../components/SelectDepartment'
export default {
  name: 'AddStaff',
  components: {
    'SelectDepartment': SelectDepartment
  },
  data() {
    return {
      isResetPassword: false,
      staffId: '',
      isEdit: false,
      permissionId: '',  
      username: '',
      password: '',
      rePassword: '',
      name: '',  
    }
  },
  created: function() {

    if(this.$route.params.id) {
      console.log('id::', this.$route.params.id);
      this.isEdit = true;
      this.staffId = this.$route.params.id;
      this.getStaffById(this.$route.params.id);
    }
  },
  methods: {
    getStaffById(staffId) {
      this.$store.dispatch('QUERY_STAFF', {
        id: staffId
      }).then(res => {
        console.log('res:getStaffById::', res);
        if(res.data.retCode == 0) {
          console.log('res:getStaffById::', res);
          this.name = res.data.data.name;
          this.username = res.data.data.username;
          this.permissionId = res.data.data.permissionId;
          this.$refs.dep.setValue(res.data.data.permissionId);
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    },
    // 获取部门id
    getDepartment(dep) {
      console.log('dep::', dep);
      if(dep.id) {
        this.permissionId = dep.id;
      } else {
        this.permissionId = '';
      }
    },
    // 
    submit() {
      if(this._utils.isEmpty(this.username)) {
        this.$message.warning('请输入账号！');
        return;
      }
      if(this._utils.isEmpty(this.name)) {
        this.$message.warning('请输入姓名！');
        return;
      }
      if(this._utils.isEmpty(this.permissionId)) {
        this.$message.warning('请选择部门！');
        return;
      }
      if(this.isResetPassword && (this._utils.isEmpty(this.password) || this.password.length < 6 || this.password.length > 16)) {
        this.$message.warning('请输入6~16位密码！');
        return;
      }
      if(this.isResetPassword && this.rePassword != this.password) {
        this.$message.warning('两次输入的密码不一致！');
        return;
      }
      this.handleStaff();  
    },  
    // 添加员工 
    handleStaff() {
      const params = {
        username: this.username,
        name: this.name,
        permissionId: this.permissionId,
      }
      if(this.isEdit) {
        params.id = this.staffId;
      }
      if(this.isResetPassword) {
        params.password = this.password;
      }
      this.$store.dispatch('HANDLE_STAFF', params).then(res => {
        console.log('res:::', res);
        if(res.data.retCode == 0) {
          this.$message.success('提交成功！');
          this.$router.push('/home/organizationalStructure');
        } else {
          res.data.errorMsg && this.$message.warning(res.data.errorMsg);
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.check-box{
  padding: 20px 0;
}
.upload-tip{
    font-size: 12px;
    color: #999;
    margin-top: 10px;
    line-height: 24px;
}

.container{
  width: 560px;
  /* margin: 0 auto; */
}
.mn{
    padding: 30px 0 50px 0;
}
.item{
    display: flex;
    margin-bottom: 10px;
}
.item>label{
    display: inline-block;
    width: 90px;
    line-height: 40px;
    text-align: right;
    margin-right: 10px;
}
.item>.tip::before{
    content: '*';
    line-height: 40px;
    color: red;
    margin-right: 5px;
}
.item-right{
    width: 300px;
}
.btn-box{
    padding-left: 90px;
}
</style>
